<template>
  <div class="login-container">
    <div class="login-header">
      <h1>智能排课系统</h1>
      <p>欢迎登录</p>
    </div>
    
    <van-form @submit="onSubmit" class="login-form">
      <van-field
        v-model="form.username"
        name="username"
        label="用户名"
        placeholder="请输入用户名"
        left-icon="contact"
        :rules="[{ required: true, message: '请输入用户名' }]"
      />
      
      <van-field
        v-model="form.password"
        type="password"
        name="password"
        label="密码"
        placeholder="请输入密码"
        left-icon="lock"
        :rules="[{ required: true, message: '请输入密码' }]"
      />
      
      <div class="login-button">
        <van-button 
          round 
          block 
          type="primary" 
          native-type="submit"
          :loading="loading"
        >
          登录
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { showToast } from 'vant'

const router = useRouter()
const userStore = useUserStore()

const loading = ref(false)
const form = reactive({
  username: 'admin',
  password: '123456'
})

const onSubmit = async () => {
  loading.value = true
  try {
    await userStore.login(form)
    showToast('登录成功')
    router.push('/dashboard')
  } catch (error) {
    showToast(error.message || '登录失败')
  } finally {
    loading.value = false
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: $padding-lg;
}

.login-header {
  text-align: center;
  margin-bottom: 48px;
  color: white;
  
  h1 {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 8px;
  }
  
  p {
    font-size: 16px;
    opacity: 0.8;
  }
}

.login-form {
  background: white;
  border-radius: 16px;
  padding: $padding-lg;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.login-button {
  margin-top: $padding-lg;
}
</style>